<html>
    <head>
        <title>Highcharts X轴翻转</title>
        <meta charset="utf-8">
        <style>
            .container{
                width: 550px;
                height: 400px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
        <script src="../lib/jquery-3.5.1.min.js"></script>
        <script src="../lib/highcharts.js"></script>
        <script>            
            $(function(){
                var chart = { type: 'spline', inverted: true};
                var title = {text: '海拔温度'};
                var subtitle = { text: '来源教程'};
                var xAxis = {
                    reversed: false,
                    title: { enabled: true, text: '海拔'},
                    labels: {
                        formatter: function(){
                            return this.value + 'km';
                        }
                    },
                    maxPadding: 0.05,
                    showLastLabel: true
                };
                var yAxis = {
                    title: { text: '温度(\xB0C)'},
                    labels: {
                        formatter: function(){
                            return this.value + '\xB0';
                        }
                    },
                    lineWidth: 2
                };
                // 提示
                var tooltip = { 
                    headerFormat: '<b>{series.name}</b><br/>',
                    pointFormat: '{point.x} km: {point.y}\xB0C'
                 };
                // 图例
                var legend = { enabled: false };
                var plotOptions = {
                    spline: {
                        marker: {
                            enabled: false
                        }
                    }
                };
                // 数据
                var series = [
                    {name: '温度', 
                    data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
                        [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
                    }
                ];
                var data = {chart: chart, title: title, subtitle: subtitle, xAxis: xAxis, 
                yAxis: yAxis, tooltip: tooltip, legend: legend, series:series, plotOptions: plotOptions};
                $(".container").highcharts(data);
            });
        </script>
    </body>
</html>